<template>
    <div class="rule-content">
        <div class="base-rule-tab">
            <ul class="rule-tab-list">
                <li @click="changeType" inx="0">
                    <a href="javascript: void(0);" :class="{'active': type == 0}">教案平齐</a>
                </li>
                <li @click="changeType" inx="1">
                    <a href="javascript: void(0);" :class="{'active': type == 1}">周任课规则</a>
                </li>

                <li @click="changeType" inx="2">
                    <a href="javascript: void(0);" :class="{'active': type == 2}">日任课规则</a>
                </li>
                <li @click="changeType" inx="3">
                    <a href="javascript: void(0);" :class="{'active': type == 3}">连上限制</a>
                </li>
            </ul>
        </div>
        <el-select v-model="course" @change="changeCours" placeholder="请选择" size="small">
            <el-option v-for="item  in courseOption" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
        </el-select>
        <div class="base-rule-content baseRuleContent">
            <!--教案齐平-->
            <el-table :data="jiaoanTableData" class="base-rule-table   table-bordered table-hover" v-show="type == 0" v-loading.body="tableLoading">
                <el-table-column prop="courseName" label="课程"></el-table-column>
                <el-table-column prop="teacherName" label="教师"></el-table-column>
                <el-table-column prop="importantType" label="重要程度">
                    <template scope="scope">
                        <el-radio-group v-model="scope.row.importantType" @change="()=>{ changeJaoAn(scope.row)}">
                            <el-radio label="1">非常重要</el-radio>
                            <el-radio label="2">相对重要</el-radio>
                            <el-radio label="3">一般</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
            </el-table>
            <!--周任课规则-->
            <el-table :data="weekTableData" class="base-rule-table   table-bordered table-hover" v-show="type == 1" v-loading.body="tableLoading">
                <el-table-column prop="courseName" label="课程"></el-table-column>
                <el-table-column prop="teacherName" label="教师"></el-table-column>
                <el-table-column prop="importantType" label="周内分布">
                    <template scope="scope">
                        <el-radio-group v-model="scope.row.weekType">
                            <el-radio label="1">周内集中</el-radio>
                            <el-radio label="2">周内分散</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column prop="importantType" label="重要程度">
                    <template scope="scope">
                        <el-radio-group v-model="scope.row.importantType">
                            <el-radio label="1">非常重要</el-radio>
                            <el-radio label="2">相对重要</el-radio>
                            <el-radio label="3">一般</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
            </el-table>
            <!--日任课规则-->
            <el-table :data="dayTableData" class="base-rule-table   table-bordered table-hover" v-show="type == 2" v-loading.body="tableLoading">
                <el-table-column prop="courseName" label="课程"></el-table-column>
                <el-table-column prop="teacherName" label="教师"></el-table-column>
                <el-table-column prop="importantType" label="日内分布">
                    <template scope="scope">
                        <el-radio-group v-model="scope.row.dayType">
                            <el-radio label="1">日内集中</el-radio>
                            <el-radio label="2">日内分散</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column prop="importantType" label="重要程度">
                    <template scope="scope">
                        <el-radio-group v-model="scope.row.importantType">
                            <el-radio label="1">非常重要</el-radio>
                            <el-radio label="2">相对重要</el-radio>
                            <el-radio label="3">一般</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
            </el-table>
            <!--连上限制-->
            <el-table :data="continTableData" class="base-rule-table   table-bordered table-hover" v-show="type == 3" v-loading.body="tableLoading">
                <el-table-column prop="courseName" label="课程"></el-table-column>
                <el-table-column prop="teacherName" label="教师"></el-table-column>
                <el-table-column prop="importantType" label="一天连上节数">
                    <template scope="scope">
                        <el-radio-group v-model="scope.row.dayConType">
                            <el-radio label="1">连上2节</el-radio>
                            <el-radio label="2">连上3节</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column prop="importantType" label="重要程度">
                    <template scope="scope">
                        <el-radio-group v-model="scope.row.importantType">
                            <el-radio label="1">非常重要</el-radio>
                            <el-radio label="2">相对重要</el-radio>
                            <el-radio label="3">一般</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
            </el-table>
            <button type="button" class="btn-teaching-plan" id="btn-teaching-plan" @click="saveTable">保存</button>
        </div>
    </div>
</template>

<script>
import utils from '../../../assets/js/urlConfig.js';
export default {
    data() {
        return {
            // 当前选择的课程
            course: '',
            // 课程列表
            courseOption: [],
            // 教案平齐数据
            jiaoanTableData: [],
            // 周任课数据
            weekTableData: [],
            // 日任课数据
            dayTableData: [],
            // 脸上限制数据
            continTableData: [],
            // 显示哪个规则
            type: 0,
            // 需要保存的数据
            saveJoAn: [],
            // 表格加载显示
            tableLoading: true,
            // 任务ID
            taskId: sessionStorage.getItem('taskId') || '91',
        }
    },
    mounted() {
        this.getTableData();
        this.getCourseOption();
    },
    methods: {
        saveTable() {
            let modifyList = []
            let len = 0;
            this.saveJoAn = [];
            let url = '';
            if (this.type == 0) {
                modifyList = this.jiaoanTableData;
                len = modifyList.length;
                url = utils.UrlConfig.updateJaqpById;
                for (let i = 0; i < len; i++) {
                    this.saveJoAn.push({
                        "id": this.jiaoanTableData[i].id,
                        "importantType": this.jiaoanTableData[i].importantType
                    })
                }
            } else if (this.type == 1) {
                const modifyList = this.weekTableData;
                const len = modifyList.length;
                url = utils.UrlConfig.updateWeekById;
                for (let i = 0; i < len; i++) {
                    this.saveJoAn.push({
                        "id": this.weekTableData[i].id,
                        "importantType": this.weekTableData[i].importantType,
                        "weekType": this.weekTableData[i].weekType,
                    })
                }
            } else if (this.type == 2) {
                const modifyList = this.dayTableData;
                const len = modifyList.length;
                url = utils.UrlConfig.updateDayById;
                for (let i = 0; i < len; i++) {
                    this.saveJoAn.push({
                        "id": this.dayTableData[i].id,
                        "importantType": this.dayTableData[i].importantType,
                        "dayType": this.dayTableData[i].dayType
                    })
                }
            } else {
                const modifyList = this.continTableData;
                const len = modifyList.length;
                url = utils.UrlConfig.updateDayConByCourseId;
                for (let i = 0; i < len; i++) {
                    this.saveJoAn.push({
                        "id": this.continTableData[i].id,
                        "importantType": this.continTableData[i].importantType,
                        "dayConType ": this.continTableData[i].dayConType
                    })
                }
            }
            this.$http.post(url + "&baseRuleList=" + JSON.stringify(this.saveJoAn))
                .then(res => {
                    res = res.data;
                    if (res.rtnCode === "0000000") {
                        this.$message({
                            message: '保存成功！',
                            type: 'success'
                        });

                    } else {
                        this.$message.error(res.msg);
                    }

                }).catch(error => {
                    console.log(error)
                })
        },
        // 切换重要程度
        changeJaoAn(obj) {},
        // 获取课程信息
        getCourseOption() {
            this.$http.get(`${utils.UrlConfig.GetQueryCourse}&taskId=${this.taskId}`)
                .then(res => {
                    this.$set(this.$data, 'courseOption', res.data.bizData);
                    this.courseOption.unshift({ name: "全部课程", id: '' })
                }).catch(error => {
                    this.$message.error(error);
                })
        },
        changeType(e) {
            this.saveJoAn = [];
            this.course = '';
            this.type = e.currentTarget.getAttribute('inx');
            this.tableLoading = true;
            switch (this.type) {
                case "0":
                    this.getTableData();
                    break;
                case "1":
                    this.getWeekTableData();
                    break;
                case "2":
                    this.getDayTableData();
                    break;
                case "3":
                    this.getContinTableData();
                    break;
            }
        },
        changeCours() {
            this.tableLoading = true;
            if (this.type == 0) {
                this.getTableData();
            } else {
                this.getDayTableData();
            }

        },
        // 教案齐平
        getTableData() {
            this.$http.get(`${utils.UrlConfig.GetJaqpByCourseId}&taskId=${this.taskId}&courseId=${this.course}`)
                .then(res => {
                    this.tableLoading = false;
                    this.jiaoanTableData = res.data.bizData;
                }).catch(error => {
                    this.$message.error(error);
                })
        },
        // 周任课
        getWeekTableData() {
            this.$http.get(`${utils.UrlConfig.GetWeekByCourseId}&taskId=${this.taskId}&courseId=${this.course}`)
                .then(res => {
                    this.tableLoading = false;
                    this.weekTableData = res.data.bizData.baseRuleList;
                }).catch(error => {
                    this.$message.error(error);
                })
        },
        // 日任课
        getDayTableData() {
            this.$http.get(`${utils.UrlConfig.getDayByCourseId}&taskId=${this.taskId}&courseId=${this.course}`)
                .then(res => {
                    res = res.data;
                    if (res.rtnCode === "0000000") {
                        this.tableLoading = false;
                        this.dayTableData = res.bizData;
                    } else {
                        this.$message.error(res.msg);
                    }

                }).catch(error => {
                    console.log(error)
                })
        },
        //连上限制
        getContinTableData() {
            this.$http.get(`${utils.UrlConfig.GetDayConByCourseId}&taskId=${this.taskId}&courseId=${this.course}`)
                .then(res => {
                    this.tableLoading = false;
                    this.continTableData = res.data.bizData.baseRuleList;
                }).catch(error => {
                    this.$message.error(error);
                })
        }
    }
}
</script>

<style scoped>

</style>
